<template>
  <grimm-page title="Validator">
    <div slot="content">
      <div class="validator-item">
        <grimm-input v-model="text1" placeholder="E-mail"></grimm-input>
        <grimm-validator ref="validator1" v-model="isValid[0]" :model="text1" :rules="rules1" :messages="messages1" :immediate="immediate"></grimm-validator>
      </div>
      <div class="validator-item">
        <grimm-validator ref="validator2" v-model="isValid[1]" :model="text2" :rules="rules2" :messages="messages2" :immediate="immediate">
          <grimm-input v-model="text2" placeholder="component name"></grimm-input>
          <div slot="message" class="custom-msg" slot-scope="props">
            <div v-if="(props.dirty || props.validated) && !isValid[1]">
              <i class="dd-grimmic-important"></i> {{ props.message }}
              <div>
                <span v-for="(item, index) in Object.values(props.result)" :key="index">
                  <template v-if="item.inValid">
                    {{ item.message + ' ' }}
                  </template>
                </span>
              </div>
            </div>
          </div>
        </grimm-validator>
      </div>
      <div class="validator-item">
        <grimm-validator ref="validator3" v-model="isValid[2]" :model="text3" :rules="rules3" :immediate="immediate">
          <grimm-input v-model="text3" placeholder="validate odd"></grimm-input>
        </grimm-validator>
      </div>
      <div class="validator-item">
        <grimm-checkbox-group v-model="checkList" :horizontal="true" :options="options"></grimm-checkbox-group>
        <grimm-validator ref="validator4" v-model="isValid[3]" :model="checkList" :rules="rules4" :immediate="immediate"></grimm-validator>
      </div>
      <div class="validator-item">
        <p>Async validate: </p>
        <grimm-validator
          ref="validator5"
          v-model="isValid[4]"
          :model="captcha"
          :rules="rules5"
          :messages="messages5"
          :immediate="immediate"
          @validating="validatingHandler"
          @validated="validatedHandler">
          <grimm-input v-model="captcha" placeholder="Please input captcha"></grimm-input>
        </grimm-validator>
      </div>
      <grimm-button @click="submit" block>Submit</grimm-button>
    </div>
  </grimm-page>
</template>

<script>
import { Validator, Locale } from '../../../src/module';
import enLang from '../../../src/locale/lang/en-US';
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage
  },
  data() {
    return {
      immediate: false,
      text1: '',
      isValid: [undefined, undefined, undefined, undefined, undefined],
      rules1: {
        required: true,
        type: 'email',
        pattern: /grimmhotels.cn$/,
        custom: (val) => {
          console.log(val)
          return val.length >= 15
        }
      },
      messages1: {
        pattern: 'The E-mail suffix need to be grimmhotels.cn.',
        custom: 'The E-mail need contain at least 12 characters.'
      },
      text2: '',
      rules2: {
        type: 'string',
        pattern: /^grimm-/,
        min: 8,
        max: 10
      },
      messages2: {
        pattern: 'Please start with "grimm-"'
      },
      text3: '100',
      rules3: {
        type: 'number',
        odd: true,
      },
      checkList: [],
      options: [
        {
          label: 'Checkbox1',
          value: 'o1',
        },
        {
          label: 'Checkbox2',
          value: 'o2',
        },
      ],
      rules4: {
        required: true
      },
      captcha: '',
      rules5: {
        type: 'number',
        required: true,
        len: 6,
        captchaCheck: (val) => {
          return (resolve) => {
            setTimeout(() => {
              resolve(val === '123456')
            }, 1000)
          }
          /** or return promise:
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(val === '123456')
            }, 1000)
          })
          **/
        }
      },
      messages5: {
        captchaCheck: 'Please input "123456"'
      }
    }
  },
  created() {
    Locale.use('en-US', enLang)
    Validator.addRule('odd', (val, config, type) => {
      // console.log(val);
      return Number(val) % 2 === 1
    })
    Validator.addMessage('odd', (config) => {
      return 'Please input odd.'
    })
    Validator.addType('email', (val) => {
      return typeof val === 'string' && /^[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)$/i.test(val)
    })
  },
  methods: {
    validatingHandler() {
      console.log('validating')
    },
    validatedHandler() {
      console.log('validated')
    },
    submit() {
      Promise.all(Object.keys(this.$refs).map((key) => {
        return this.$refs[key].validate()
      })).then(() => {
        if (this.isValid.every(item => item)) {
          this.$createToast({
            type: 'success',
            txt: 'Submited',
            time: 1000
          }).show()
        }
      })
    }
  },
}
</script>

<style lang="stylus">
  .validator-item
    box-sizing: border-box
    min-height: 70px
    .grimm-input 
      input 
        padding: 10px
    .custom-msg
      color: orange
</style>

